<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>电商后台</title>
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="container">
        <div class="left-box">
            <ul class="userMenu">
                <li class="item active" data-id="center">
                    <i class="fa fa-home" aria-hidden="true"></i>
                    首页
                </li>
                <li class="item" data-id="goods">
                    <i class="fa fa-tag" aria-hidden="true"></i>
                    商品管理
                </li>
                <li class="item" data-id="order">
                    <i class="fa fa-file-o" aria-hidden="true"></i>
                    订单管理
                </li>
                <li class="item" data-id="money">
                    <i class="fa fa-percent" aria-hidden="true"></i>
                    财务管理
                </li>
                <li class="item" data-id="data">
                    <i class="fa fa-bar-chart" aria-hidden="true"></i>
                    数据分析
                </li>
                <li class="item" data-id="setting">
                    <i class="fa fa-cog" aria-hidden="true"></i>
                    系统设置
                </li>
                
            </ul>
            <div class="user-info" >
                <img src="../img/bing.png" alt="">
                <span>孙宛宛</span>
            </div>
        </div>
        <div class="right-box">
            <div class="top">
                <span class="current-tag">首页</span>
                <div class="btn">
                    <i class="fa fa-tasks" aria-hidden="true"></i>
                    <span>任务</span>
                </div>
                <div class="btn">
                    <i class="fa fa-envelope-o" aria-hidden="true"></i>
                    <span>消息</span>
                </div>
                <div class="btn">
                    <i class="fa fa-user-o" aria-hidden="true"></i>
                    <span>美少女</span>
                </div>
            </div>
            <div id="middle"></div>
            <div class="handler"></div>
        </div>
    </div>
    <script src="index.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script>$(function() {
        $(".userMenu").on("click", "li", function() {
            var sId = $(this).data("id"); //获取data-id的值
            window.location.hash = sId; //设置锚点
            loadInner(sId);
        });

        function loadInner(sId) {
            var sId = window.location.hash;
            var pathn, i;
            switch(sId) {
                case "#center":
                    pathn = "center.html";
                    i = 0;
                    break;
                case "#goods":
                    pathn="goods.html";
                    i=1;
                    break;　　　　　　　
                case "#order":
                    pathn = "order.html";
                    i = 2;
                    break;
                case "#money":
                    pathn = "money.html";
                    i = 3;
                    break;
                case "#data":
                    pathn = "data.html";
                    i = 4;
                    break;
                case "#setting":
                    pathn = "setting.html";
                    i = 5;
                    break;　　　　　　　
                default:
                    pathn = "center.html";
                    i = 0;
                    break;
            }
            $("#middle").load(pathn); //加载相对应的内容
            $(".userMenu li").eq(i).addClass("item active").siblings().removeClass("item active"); //当前列表高亮
        }
        var sId = window.location.hash;
        loadInner(sId);
    });
</script>
</body>

</html>